<template>
  <div>
    <div style="width: 100%; height: 100px">
      <div style="height: 100%; width: 22%; float: left; margin-left: 2%">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="zhanshi[0]" class="image" />
          <div>
            <span style="font-size: small">中国机长</span>
          </div>
        </el-card>
      </div>
      <div style="height: 100%; width: 22%; float: left; margin-left: 2%">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="zhanshi[1]" class="image" />
          <div>
            <span style="font-size: small">侏罗纪世界3</span>
          </div>
        </el-card>
      </div>
      <div style="height: 100%; width: 22%; float: left; margin-left: 2%">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="zhanshi[2]" class="image" />
          <div>
            <span style="font-size: small">奇迹笨小孩</span>
          </div>
        </el-card>
      </div>
      <div style="height: 100%; width: 22%; float: left; margin-left: 2%">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="zhanshi[3]" class="image" />
          <div>
            <span style="font-size: small">月球陨落</span>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup>
const zhanshi = [
  require('@/assets/img/中国机长.jpg'),
  require('@/assets/img/侏罗纪世界3.jpg'),
  require('@/assets/img/奇迹笨小孩.jpg'),
  require('@/assets/img/月球陨落.jpg'),
];
</script>
<style lang="scss" scoped>
.image {
  width: 100%;
  display: block;
}
</style>
